import React from 'react';
import ReactDOM from 'react-dom/client';

// 导入外部样式
import './index.css'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

// React使用的是 jsx 语法，jsx 中遇到 {} 理解成逻辑。遇到<>理解为标签
function App() {

  // 将样式定义在一个对象中
  const obj = {
    color: '#f66'
  }

  return <>
    {/* 行类样式 */}
    <h1 style={{ color: '#f66', fontSize: '58px' }}>组件内容 1 + 1 {1 + 1}</h1>
    <h2 style={obj}>我是 h2</h2>
    {/* 在 React 中定义一个 class 要使用 className，因为 class 是系统关键字 */}
    <h3 className='h3'>我是 h3</h3>
  </>
}

root.render(
  <App />
);